import React, { useEffect, useState } from 'react';
import { FieldProps } from '@rjsf/utils';
import { Table } from 'antd';
import { TableRowSelection } from 'antd/es/table/interface';
/**
 * 
 * "test": {
      "title": "测试",
      "type": "array",
      "rowKey": "name",
      "selectType": "checkbox", // checkbox | radio | null
      "default": ["2"],
      "columns": [
        {
          "title": "名称",
          "dataIndex": "name",
          "key": "name",
          "width": "30%",
          "ellipsis": true
        },
        {
          "title": "数量1",
          "dataIndex": "number",
          "key": "number",
          "width": "30%",
          "align": "center"
        },
        {
          "title": "显示",
          "dataIndex": "visible",
          "width": "30%",
          "key": "visible",
          "align": "center"
        }
      ],
      "data": [
        {
          "name": "1",
          "number": 1,
          "visible": "是"
        },
        {
          "name": "2",
          "number": 1,
          "visible": "是"
        },
        {
          "name": "3",
          "number": 1,
          "visible": "是",
          "children": [
            {
              "name": "4",
              "number": 1,
              "visible": "是"
            },
            {
              "name": "5",
              "number": 1,
              "visible": "是"
            },
            {
              "name": "6",
              "number": 1,
              "visible": "是"
            }
          ]
        }
      ]
    }
    "test": {
      "ui:field": "tableField"
    }
 * */
export const TableField = ({
  schema,
  formData,
  onChange,
  ...rest
}: FieldProps<string[]>) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(formData);
  const rowSelection: TableRowSelection = {
    selectedRowKeys,
    // TODO
    // onSelect: async (record, selected) => {
    //   if (selected) {
    //     rest.onFocus('table_' + record[schema?.rowKey || 'id'], record);
    //   } else {
    //     rest.onBlur('table_' + record[schema?.rowKey || 'id'], record);
    //   }
    // },
    onChange: (selectedRowKeys) => {
      console.log(selectedRowKeys);
      setSelectedRowKeys(selectedRowKeys);
      onChange(selectedRowKeys as string[]);
    },
  };
  const [cellWidth, setCellWidth] = useState<number>(0);
  const [columns, setColumns] = useState(schema?.columns || []);
  useEffect(() => {
    setSelectedRowKeys(formData);
  }, [formData]);
  const type = schema?.selectType || null;
  useEffect(() => {
    const box = document.querySelector('.table_container_');
    const tempW = box?.getBoundingClientRect().width / 4;
    setCellWidth(tempW);
    setColumns(
      (schema?.columns || []).map((item) => ({
        ...item,
        width: item.width || Math.max(tempW, 60),
        ellipsis: item.ellipsis || true,
        align: item.align || 'center',
        key: item.key || item.dataIndex,
      })),
    );
  }, []);
  return (
    <div className={'table_container_'}>
      <div className='mb-1'>{schema?.title}</div>
      <Table
        columns={columns}
        rowSelection={
          type ? { ...rowSelection, checkStrictly: false, type } : null
        }
        dataSource={(schema?.data || []) as Array<{ [key: string]: any }>}
        scroll={{ y: 200, x: schema?.columns?.length * cellWidth }}
        onRow={(record) => ({
          onClick: () => {
            rest.onFocus('table_' + record[schema?.rowKey || 'id'], record);
          },
        })}
        size='small'
        rowKey={schema?.rowKey || 'id'}
        pagination={false}
        expandable={{
          defaultExpandAllRows: true, // 默认展开所有行
        }}
      />
    </div>
  );
};
